<template>
  <Page title="答题卡">
    <template v-slot:navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">答题卡</span>
        </div>
      </div>
    </template>
    <template v-slot:content>
      <div class="w-full h-full p-20px box-border">
        <div class="container w-full h-full bg-white flex flex-col overflow-hidden">
          <div class="analysis text-333 mt-20px pb-20px text-center">
            正确{{ statistics.rightCount }}题，错误{{ statistics.errorCount }}题，待批改{{
              statistics.waitingCount
            }}题，<span class="text-FF4040">正确率{{ statistics.rightRate }}%</span>
          </div>
          <div class="list px-0px box-border flex-1 overflow-scroll" style="font-size: 0">
            <div
              class="item flex-center relative"
              :class="
                i.remoteStudentAnswerStatus == -1
                  ? 'bg-F8AC23-10'
                  : i.remoteStudentAnswerStatus == 0
                  ? 'bg-FF4040-10'
                  : 'bg-30C9A1-10'
              "
              v-for="(i, index) in list"
              :key="index"
              @click="oneExplanation(index)"
            >
              <span class="text-666666">第</span
              ><span class="index font-bold text-333">{{ index + 1 }}</span
              ><span class="text-666666">题</span>

              <!-- 待批改 -->
              <span
                class="correct-status absolute text-white py-5px px-8px bg-F8AC23"
                v-show="i.remoteStudentAnswerStatus == -1"
                >待批改</span
              >
              <!-- 做对了 -->
              <div
                class="correct-status absolute flex items-center px-8px py-6px bg-30C9A1"
                v-show="i.remoteStudentAnswerStatus == 1"
              >
                <img style="width: 0.18rem; height: 0.12rem" src="static/icons/tick.png" mode="" />
              </div>
              <!-- 做错了 -->
              <div
                class="correct-status absolute flex items-center px-11px py-6px bg-FF4040"
                v-show="i.remoteStudentAnswerStatus == 0"
              >
                <img style="width: 0.12rem; height: 0.12rem" src="static/icons/cross.png" mode="" />
              </div>
            </div>
          </div>
          <div class="submit py-60px flex">
            <CustomButton
              class="block mr-84px"
              style="width: 3rem"
              :style="statistics.errorCount > 0 ? '' : 'display:none !important;'"
              @click="errorsExplanation"
              >错题解析
            </CustomButton>
            <CustomButton
              class="block"
              style="width: 3rem"
              :style="statistics.errorCount > 0 ? '' : 'width: 4.11rem'"
              @click="allExplanation"
              >全部解析</CustomButton
            >
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
// import Page from '@/components/page/index'
import Page from '@/components/page/newPage'
import CustomButton from '@/components/button/index'
import { getExamStudentQuestions } from '@/api/homework'
import { mapState, mapGetters } from 'vuex'

export default {
  components: {
    Page,
    CustomButton
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === 'homework_todo_question_xkw' || from.name === 'homework_scantron') {
        vm.$route.params.completed = true
      }

      if (from.name === 'homework_explanation' && from.params.completed) {
        vm.$route.params.completed = true
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    const { completed } = this.$route.params

    if (completed) {
      to.params.completed = true
    }

    next()
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    ...mapState(['homework']),
    ...mapGetters(['studentId']),
    // 批改情况统计
    statistics() {
      const total = this.list.length

      if (!(total > 0)) {
        return {
          rightCount: 0, // 正确题目数量
          errorCount: 0, // 错误题目数量
          waitingCount: 0, // 待批改题目数量
          rightRate: 0 // 正确率
        }
      }

      const rightCount = this.list.filter((i) => i.remoteStudentAnswerStatus === 1).length
      const errorCount = this.list.filter((i) => i.remoteStudentAnswerStatus === 0).length
      const waitingCount = this.list.filter((i) => i.remoteStudentAnswerStatus === -1).length

      const rightRate = Math.round((rightCount / total) * 100)

      return {
        rightCount, // 正确题目数量
        errorCount, // 错误题目数量
        waitingCount, // 待批改题目数量
        rightRate // 正确率
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1)
    },
    async init() {
      const {
        record: { id },
        questions
      } = this.homework.currentHomework
      const { studentId: otherStudentId } = this.$route.query

      const { data } = await getExamStudentQuestions({
        examId: id,
        studentId: otherStudentId ? otherStudentId : this.studentId
      })

      if (Array.isArray(questions)) {
        this.list = questions.map((i) => {
          const remoteStudentAnswerItem = data.find((item) => item.questionId === i.questionId)

          const { studentScore } = remoteStudentAnswerItem

          i['remoteStudentAnswer'] = remoteStudentAnswerItem
          // -1 => 待批改 0 => 做错了 1 => 做对了
          i['remoteStudentAnswerStatus'] = !!studentScore
            ? 1
            : parseInt(studentScore) === 0
            ? 0
            : -1
          return i
        })
      }
    },
    oneExplanation(index) {
      this.$router.push(`/pages/homework/explanation/index?all=1&index=${index}`)
    },
    errorsExplanation() {
      const { errorCount } = this.statistics

      if (errorCount === 0) {
        this.$message.info('无错题')
        return
      }

      this.$router.push('/pages/homework/explanation/index')
    },
    allExplanation() {
      this.$router.push('/pages/homework/explanation/index?all=1')
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.container {
  border-radius: 16px;
}

.analysis {
  font-size: 28px;
  line-height: 28pxpx;
  font-weight: 500;
}

.list {
  display: inline-grid;
  align-content: flex-start;
  grid-template-columns: 190px 190px 190px 190px 190px 190px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;

  .item {
    width: 190px;
    height: 100px;
    font-size: 28px;
    line-height: 36px;
    border-radius: 8px;

    .index {
    }

    .correct-status {
      top: 0;
      left: 0;
      font-size: 20px;
      line-height: 20px;
      border-radius: 8px 0px 15px 0px;
    }
  }
}

.submit {
  margin: 0 auto;
}
</style>
